/**
 * 登陆组件
 * 给按钮注册点击事件
 * 在点击事件里得到 文件框的值
 * 通过ajax请求(axios)调用接口文档提供的接口!
 * 如果登陆失败，就给个提示
 * 登陆成功，就跳转到首页!
 */
import React from 'react'
import  './Login.css'
import axios from 'axios'
export default class Login extends React.Component{
  constructor(){
    super()
    this.state = {
      username:'前端学院',
      password:'123456'
    }
  }
  render(){
    return(
    <div className="login">
    <div className="login-wrap">
      <div className="avatar">
        <img src="./uploads/monkey.png" className="img-circle" alt="" />
      </div>
      <form action="" className="col-md-offset-1 col-md-10">
        <div className="input-group input-group-lg">
          <span className="input-group-addon">
            <i className="fa fa-user"></i>
          </span>
          <input type="text" className="form-control" placeholder="用户名" 
          onChange={(e)=> this.setState({username:e.target.value})}
          value={this.state.username}/>
        </div>
        <div className="input-group input-group-lg">
          <span className="input-group-addon">
            <i className="fa fa-key"></i>
          </span>
          <input type="text" className="form-control" placeholder="密码" 
          onChange={(e)=> this.setState({password:e.target.value})}
          value={this.state.password}/>
        </div>
        <button type="submit" className="btn btn-lg btn-primary btn-block"
         onClick={this.login.bind(this)}>登 录</button>
      </form>
    </div>
  </div>)
  }

  // 登陆方法
  login(e){
  // 禁用默认事件
  e.preventDefault()
  //   axios.post('./package.json',
  // // {"a":1,"b":2}
  // "a=1&b=2",{
  //   // 这个请求头，只是为了告诉后端，我们发的数据是什么格式!
  //   'Content-type':'application/x-www-form-urlencoded'
  //   // 默认是Content-type: 'application/json'
  // })

    axios.post('/api/login',
    // {
    //   tc_name: this.state.username,
    //   tc_pass: this.state.password
    // }
    'tc_name='+this.state.username+'&tc_pass='+this.state.password
    ,
    // 请求请求头！
    {'Content-type':'application/x-www-form-urlencoded'}
    )
    .then((res) => {
        // console.log(res)
        // 把用户的头像和用户名保存
        localStorage.setItem('userInfo', JSON.stringify(res.data.result))

        // 跳转到首页
        // #/DashBoard
        location.href = '#/DashBoard'
    })
  }
}